<template>
  <div id="box">
    <Title title="帖子详情"></Title>
    <div id="bodyBox">
      <!-- 帖子标题 -->
      <h2>{{invitationDetails.title}}</h2>
      <div id="innerBox">
        <!-- 用户头像 -->
        <div id="picture">
          <img :src="invitationDetails.avatar" alt />
        </div>
        <!-- 用户名 -->
        <div id="hoster">
          <span>{{invitationDetails.userName}}</span>
        </div>
      </div>
      <!-- 帖子封面 -->
      <div id="msgArea">
        <div class="imgBox" ref="imgBox">
          <img class="invitationimg" :src="invitationDetails.coverImgUrl" alt />
        </div>

        <!-- 帖子内容 -->
        <p class="text">{{invitationDetails.intro}}</p>
        <div class="del">
          <i
            v-if="showList(invitationDetails.userId)"
            class="el-icon-delete"
            @click="deleteMsg(invitationDetails.postsId)"
          >删除帖子</i>
        </div>
      </div>

      <div id="contentArea">
        <h5>全部评论</h5>

        <div class="contentBox" v-for="(item,index) in comtentMsgList" :key="index">
          <div class="avatar-name">
            <img :src="item.avatar" alt />
            <span>{{item.userName}}</span>
          </div>

          <p>{{item.commentContent}}</p>

          <div class="rbCommentCard" v-for="(item2,index2) in item.rbCommentList" :key="index2">
            <div class="avatar-name">
              <img :src="item2.avatar" alt />
              <span>{{item2.userName}}</span>
            </div>

            <p>{{item2.commentContent}}</p>
          </div>

          <div class="commentIcon">
            <i
              v-if="showList(invitationDetails.userId)"
              class="el-icon-delete"
              @click="deleteComment(item.commentId)"
            ></i>
            <i @click="rbComment(item.commentId,item)" class="el-icon-chat-round">查看回复</i>
            <i @click="CommentReply(item.commentId,item)" class="el-icon-chat-round">回复</i>
          </div>
        </div>
      </div>
    </div>

    <el-input
      ref="commentInput"
      id="context"
      v-model="input"
      @click.native.capture="comment()"
      placeholder="发表评论 :"
    ></el-input>

    <el-button
      v-show="isShow"
      type="primary"
      class="contextSubmit"
      icon="el-icon-check"
      @click="comment()"
    >评论</el-button>

    <!-- <el-button
          v-show="!isShow"
          class="contextSubmit"
          icon="el-icon-check"
          @click="sendARbComent()"
    >回复</el-button>-->
  </div>
</template>
<script>
import {
  getCommentContent,
  getCommentReplyList,
  deletePost,
  deleteComment,
  getPostsDetails
} from "../api/luntan-api";
import Title from "../components/Title.vue";

export default {
  components: {
    Title
  },
  data() {
    return {
      comtentMsgList: [],
      input: "",
      isShow: true,
      commentId: "",
      postsId: "",
      invitationDetails: "",
      selectedComment: null,
      parentId: ""
    };
  },
  methods: {
    comment() {
      // console.log(this.postsId);
      this.$router.push({
        path: `/home/comment`,
        query: { postsId: this.postsId }
      });
    },
    CommentReply(commentId, item) {
      // this.parentId == commentId;

      this.$router.push({
        path: `/home/comment-reply`,
        query: {
          postsId: this.postsId,
          parentId: item.commentId
        }
      });
    },
    //点击评论的回复
    rbComment(commentId, item) {
      this.selectedComment = item;
      this.$forceUpdate();
      // this.isShow = false;
      this.commentId = commentId;

      //再次点击清除这个列表，达到再次点击关闭回复这个小页面
      if (item.rbCommentList) {
        item.rbCommentList = "";
      } else {
        //调用回复列表的接口
        getCommentReplyList(commentId).then(res => {
          this.$forceUpdate();
          if (res.code == 0) {
            item.rbCommentList = res.rows;
          }
        });
      }
    },
    //删除评论
    deleteComment(commentId) {
      this.$forceUpdate();
      deleteComment(commentId).then(res => {
        //删除成功后刷新评论列表
        console.log(res);
        getCommentContent(this.$route.query.postsId).then(res => {
          this.comtentMsgList = res.rows;
        });
      });
    },
    // 删除帖子
    deleteMsg(postsId) {
      deletePost(postsId).then(res => {
        if (res.code == 0) {
          this.$router.push({ path: "/home" });
        }
      });
    },
    showList(userId) {
      if (userId == this.userId) {
        return true;
      }
    }
  },
  computed: {
    userId() {
      return this.$store.state.user.userId;
    }
  },
  created() {
    this.postsId = this.$route.query.postsId;
    getCommentContent(this.$route.query.postsId).then(res => {
      this.comtentMsgList = res.rows;
    });
    //帖子详情
    getPostsDetails(this.postsId).then(res => {
      this.invitationDetails = res.data;
    });
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;

  padding: 0;
}

#box {
  //   height: calc(100vh - 140px);

  #bodyBox {
    margin-top: 0;
    height: calc(100vh - 140px);
    overflow: scroll;
  }
  .del {
    text-align: right;
    margin: 5px 10px 5px 5px;
    font-size: 12px;
    i {
      display: inline-block;
      
    }
  }

  /deep/ .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #e4e7ed;
    background: white;
    color: #303133;
  }
}

h2 {
  text-align: left;
  padding: 10px;
}

#context {
  width: 75%;
  position: fixed;
  left: 0;
  bottom: 58px;
}

/deep/ #context:focus {
  color: #ccc;
  background-color: #fff;
}

.contextSubmit {
  position: fixed;
  right: 1px;
  bottom: 60px;
  height: 39px;
  width: 100px;
}

#innerBox {
  overflow: hidden;
  background-position: center;
  background-size: 100%;
  height: 50px;

  #picture {
    margin-left: 30px;
    border-radius: 50%;
    float: left;
    height: 30px;

    img {
      border-radius: 50%;
      width: 30px;
      height: 30px;
    }
  }

  #hoster {
    padding: 0 10px;
    line-height: 30px;
    float: left;
    height: 30px;

    span {
      font-size: 12px;
    }
  }
}

#msgArea {
  padding: 0 6px;
  text-align: left;
  /*background-color: #f5f7fa;*/

  .imgBox {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .text {
    padding: 5px 0;
    font-size: 13px;
    color: #888888;
  }

  .msgAreaBot {
    text-align: right;
    padding-bottom: 10px;
    border-bottom: 1px dashed black;

    i {
      margin-left: 10px;
      border-radius: 20px 20px 20px 20px;
      padding: 5px;
      border: 1px solid #ccc;
      font-size: 14px;
    }
  }
}

#contentArea {
  // overflow: scroll;
  /*padding: 0 4px;*/
  text-align: left;
  height: calc(100% - 100px);
  background-color: #f5f7fa;

  h5 {
    padding: 12px 5px 0;
    font-size: 16px;
  }

  .contentBox {
    padding: 10px 0 0 10px;
    text-align: left;
    margin-top: 10px;
    /*border: 1px solid #ccc;*/
    // box-shadow: 2px 2px #ccc;
    background: white;

    .avatar-name {
      img {
        vertical-align: middle;
      }

      span {
        margin-left: 5px;
      }
    }

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }

    span {
      font-size: 14px;
      font-weight: bolder;
    }

    p {
      font-size: 14px;
      word-wrap: break-word;
      padding: 2px;
    }

    .rbCommentCard {
      text-align: left;
      margin: 10px;
      border-bottom: 1px solid #e4e7ed;
      /* border-radius: 10px; */
      margin-bottom: 5px;
      padding: 5px;

      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      span {
        font-size: 12px;
        font-weight: bolder;
      }

      p {
        font-size: 10px;
        color: #888888;
      }
    }

    .commentIcon {
      text-align: right;

      i {
        margin: 0 10px 10px 0;
        border-radius: 20px 20px 20px 20px;
        padding: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
      }

      i:hover {
        color: yellowgreen;
        font-size: 12px;
      }
    }
  }
}
</style>
